<template>
	<div class="enter-match-pass">
		<div class="org" @click="goAdd(1)">{{ $t('enter_match.org_pass') }}</div>
		<div class="guess" @click="goAdd(2)">{{ $t('enter_match.guess_pass') }}</div>
		<div class="team" @click="goAdd(3)">{{ $t('enter_match.team_pass') }}</div>
		<div class="own" @click="goAdd(4)">{{ $t('enter_match.own_pass') }}</div>
		<Dialog title="提示" :visible.sync="visible" width="1040px" :append-to-body="true" custom-class="epidemic-dialog" :show-close="false" center>
			<span slot="title">
				疫情承诺书
				<Divider></Divider>
			</span>
			<div class="epidemic-content">{{yiqingchengnuo.content}}</div>
			<div slot="footer"><el-button plain @click="handleSuccess" class="epidemic-btn">确定</el-button></div>
		</Dialog>
	</div>
</template>
<script>
//  1企业 2嘉宾 3团体 4个人
import { Dialog, Divider } from 'element-ui';
import { yiqingchengnuo } from '../../api/cms.js';

export default {
	components: {
		Dialog,
		Divider
	},
	data() {
		return {
			yiqingchengnuo: {},
			visible: false,
			index: 1
		};
	},

	created() {
		yiqingchengnuo()
			.then(res => {
				this.yiqingchengnuo = res.data.data.yiqingchengnuo;
				console.log();
			})
			.catch(res => {
				console.log(res);
			});
	},
	methods: {
		goAdd(index) {
			this.index = index;
			this.visible = true;
		},
		handleSuccess() {
			this.$router.push({
				name: 'EnterMatchAdd',
				params: {
					type: this.index
				}
			});
		}
	}
};
</script>
<style scoped>
.enter-match-pass {
	display: flex;
	flex-wrap: wrap;
	width: 1255px;
	margin: 88px auto 223px;
	height: 732px;
	justify-content: space-between;
}
.enter-match-pass div {
	width: 590px;
	height: 324px;
	color: #fff;
	font-size: 60px;
	padding: 64px 56px;
	cursor: pointer;
}
.own {
	background: url('/static/images/own_pass.png');
}
.team {
	background: url('/static/images/team_pass.png');
}
.org {
	background: url('/static/images/org_pass.png');
}
.guess {
	background: url('/static/images/guess_pass.png');
}
</style>
<style>
.epidemic-dialog {
	border-radius: 8px;
}
.epidemic-dialog .el-dialog__header {
	text-align: left;
}
.epidemic-dialog .el-divider--horizontal {
	margin: 10px 0;
}
.epidemic-btn {
	color: #01478f;
	border-color: #01478f;
}
.epidemic-btn.el-button.is-plain:focus,
.epidemic-btn.el-button.is-plain:hover {
	color: #01478f;
	border-color: #01478f;
}
.epidemic-content {
	height: 237px;
	overflow-y: auto;
}
</style>
